<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动商城 - 首页</title>
    <!-- CSS files -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/reset.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <!-- Fix style issues with inline CSS -->
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            color: #333;
            background-color: #f8f9fa;
        }
        .navbar-nav {
            display: flex;
            flex-direction: row;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }
        .navbar-nav .nav-link {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }
        .nav-item {
            margin-right: 10px;
        }
        .carousel-item {
            height: 400px;
        }
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .carousel-caption {
            background-color: rgba(0,0,0,0.4);
            padding: 15px;
            border-radius: 5px;
        }
        .category-card img, .product-img {
            width: 100%;
            height: 180px;
            object-fit: contain;
            margin-bottom: 10px;
            background-color: #fff;
            padding: 5px;
        }
        .container {
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
            margin-right: auto;
            margin-left: auto;
        }
        @media (min-width: 576px) {
            .container {
                max-width: 540px;
            }
        }
        @media (min-width: 768px) {
            .container {
                max-width: 720px;
            }
        }
        @media (min-width: 992px) {
            .container {
                max-width: 960px;
            }
        }
        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }
        }
        /* 重写加入购物车按钮样式 */
        .add-to-cart, .add-to-cart-sm {
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
            color: #e94560 !important;
        }
        .add-to-cart:hover, .add-to-cart-sm:hover {
            background-color: transparent !important;
            color: #c81e45 !important;
        }
        
        /* 商品卡片样式 */
        .product-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 10px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .product-card a {
            color: inherit;
            text-decoration: none;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .product-info {
            padding: 10px 5px;
            flex: 1;
        }
        .product-name {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 2.5em;
        }
        .product-subtitle {
            color: #777;
            font-size: 14px;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 2.5em;
        }
        .product-price {
            color: #e94560;
            font-size: 18px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <jsp:include page="common/header.jsp"/>
    
    <!-- 轮播图 -->
    <jsp:include page="common/banner_carousel.jsp"/>
    
    <!-- 热门分类 -->
    <section class="category-section py-5 bg-light">
        <div class="container">
            <h2 class="category-title mb-4">热门分类</h2>
            <div class="row">
                <c:forEach items="${categories}" var="category">
                    <div class="col-md-3 col-6">
                        <div class="category-card">
                            <a href="${pageContext.request.contextPath}/product/category/${category.id}">
                                <img src="${not empty category.image ? category.image : pageContext.request.contextPath.concat('/static/images/category-default.jpg')}" alt="${category.name}">
                                <h5>${category.name}</h5>
                            </a>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </section>
    
    <!-- 热门商品 -->
    <section class="product-section py-5">
        <div class="container">
            <h2 class="category-title mb-4">热门商品</h2>
            <div class="row">
                <c:forEach items="${hotProducts}" var="product">
                    <div class="col-lg-3 col-md-4 col-6">
                        <div class="product-card">
                            <a href="${pageContext.request.contextPath}/product/detail/${product.id}">
                                <img src="${not empty product.mainImage ? product.mainImage : pageContext.request.contextPath.concat('/static/images/product-default.jpg')}" alt="${product.name}" class="product-img">
                                <div class="product-info">
                                    <h5 class="product-name">${product.name}</h5>
                                    <p class="product-subtitle">${product.subtitle}</p>
                                    <div class="product-price">¥${product.price}</div>
                                </div>
                            </a>
                            <button class="btn add-to-cart" data-product-id="${product.id}">
                                <i class="fas fa-shopping-cart me-2"></i>加入购物车
                            </button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </section>
    
    <!-- 新品上市 -->
    <section class="product-section py-5 bg-light">
        <div class="container">
            <h2 class="category-title mb-4">新品上市</h2>
            <div class="row">
                <c:forEach items="${newProducts}" var="product">
                    <div class="col-lg-3 col-md-4 col-6">
                        <div class="product-card">
                            <a href="${pageContext.request.contextPath}/product/detail/${product.id}">
                                <img src="${not empty product.mainImage ? product.mainImage : pageContext.request.contextPath.concat('/static/images/product-default.jpg')}" alt="${product.name}" class="product-img">
                                <div class="product-info">
                                    <h5 class="product-name">${product.name}</h5>
                                    <p class="product-subtitle">${product.subtitle}</p>
                                    <div class="product-price">¥${product.price}</div>
                                </div>
                            </a>
                            <button class="btn add-to-cart" data-product-id="${product.id}">
                                <i class="fas fa-shopping-cart me-2"></i>加入购物车
                            </button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <jsp:include page="common/footer.jsp"/>
    
    <!-- JavaScript files -->
    <!-- jQuery and Bootstrap are already loaded in header.jsp -->
    <script>
        $(document).ready(function() {
            // 直接初始化轮播图
            try {
                var myCarousel = document.getElementById('mainCarousel')
                if (myCarousel) {
                    var carousel = new bootstrap.Carousel(myCarousel, {
                        interval: 5000,
                        wrap: true
                    });
                    // 确保轮播图自动开始
                    carousel.cycle();
                }
            } catch (e) {
                console.error("Carousel initialization error:", e);
            }
            
            // 加入购物车
            $('.add-to-cart').click(function() {
                var productId = $(this).data('product-id');
                $.ajax({
                    url: '${pageContext.request.contextPath}/cart/add',
                    type: 'POST',
                    data: {
                        productId: productId,
                        quantity: 1
                    },
                    success: function(response) {
                        if (response.status === 1) {
                            alert('已成功添加到购物车');
                        } else {
                            alert(response.msg);
                        }
                    },
                    error: function() {
                        alert('添加失败，请稍后再试');
                    }
                });
            });
        });
    </script>
</body>
</html> 